<script setup lang="ts">
import {message} from "ant-design-vue";

import dayjs from "dayjs";
import moment from "moment";
import EChart from "~/contentScripts/views/echart.vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin, userInfo} from "~/logic";
import {getCurrentInstance} from "vue";
import {
  CustomerOverViewShopCustomerEquityTrend,
} from "~/utils/interception/sycm/customerOverviewInterception";
import RequestInterception from "~/utils/RequestInterception";

const {proxy} = getCurrentInstance();
const req:RequestInterception = proxy.$req;
const visible = ref(false);
const loginVisible = ref(false);
onMounted(() => {
  userInfo()
})

const loading = ref(false);
dayjs.locale('zh-cn')
const dataSource = ref<any>([]);

const __option = getCurrentInstance()?.appContext.provides.option;
const handle = () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    }
  }, __option)) {
    loadData();
  }
}
let echartOptions = {
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['会员', '潜在客户', '已购客户', '店铺资产总客户数', '未购客户', '粉丝数'],
  },
  toolbox: {
    feature: {
      saveAsImage: {
        name: '店铺客户资产统计',
      },
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: [],
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    // 会员 memberCnt
    // 潜在客户 potentialCnt
    // 已购客户 purchasedCnt
    // 店铺资产总客户数 totalCnt
    // 未购客户 unpurchasedCnt
    // 粉丝数 vermicelliCnt
    {
      name: '会员',
      type: 'line',
      // stack: '总量',
      data: [],
    },
    {
      name: '潜在客户',
      type: 'line',
      // stack: '总量',
      data: [],
    },
    {
      name: '已购客户',
      type: 'line',
      // stack: '总量',
      data: [],
    },
    {
      name: '店铺资产总客户数',
      type: 'line',
      // stack: '总量',
      data: [],
    },
    {
      name: '未购客户',
      type: 'line',
      // stack: '总量',
      data: [],
    },
    {
      name: '粉丝数',
      type: 'line',
      // stack: '总量',
      data: [],
    },
  ],
};
const loadData = () => {
  showChart.value = false;
  let data = req.getResponse(CustomerOverViewShopCustomerEquityTrend);
  if (!data){
    return message.error('获取数据失败，请刷新页面重试！');
  }
  // console.log(data);
  // 会员 memberCnt
  // 潜在客户 potentialCnt
  // 已购客户 purchasedCnt
  // 店铺资产总客户数 totalCnt
  // 未购客户 unpurchasedCnt
  // 粉丝数 vermicelliCnt
  dataSource.value = [];
  let dateRange = data.extra.queryParam.dateRange;
  dateRange = dateRange.split('|');
  let start = moment(dateRange[1]);
  for (let i = 0; i < 30; i++) {
    dataSource.value.push({
      'statDate': moment(start).subtract(30-i-1, 'days').format('YYYY-MM-DD'),
      'memberCnt': data.data.memberCnt[i],
      'potentialCnt': data.data.potentialCnt[i],
      'purchasedCnt': data.data.purchasedCnt[i],
      'totalCnt': data.data.totalCnt[i],
      'unpurchasedCnt': data.data.unpurchasedCnt[i],
      'vermicelliCnt': data.data.vermicelliCnt[i],
    })
  }
  echartOptions.xAxis[0].data = dataSource.value.map((item: string) => item.statDate);
  echartOptions.series[0].data = data.data.memberCnt;
  echartOptions.series[1].data = data.data.potentialCnt;
  echartOptions.series[2].data = data.data.purchasedCnt;
  echartOptions.series[3].data = data.data.totalCnt;
  echartOptions.series[4].data = data.data.unpurchasedCnt;
  echartOptions.series[5].data = data.data.vermicelliCnt;
  visible.value = true;
  nextTick(()=>{
    showChart.value = true;
  })
}
const columns = [
  {
    title: '日期',
    dataIndex: 'statDate',
    key: 'statDate',
    sorter: (a: any, b: any) => dayjs(a.statDate).unix() - dayjs(b.statDate).unix(),
  },
  {
    title: '会员',
    dataIndex: 'memberCnt',
    key: 'memberCnt',
    sorter: (a: any, b: any) => a.memberCnt - b.memberCnt,
    align: 'center',
  },
  {
    title: '潜在客户',
    dataIndex: 'potentialCnt',
    key: 'potentialCnt',
    sorter: (a: any, b: any) => a.potentialCnt - b.potentialCnt,
    align: 'center',
  },
  {
    title: '已购客户',
    dataIndex: 'purchasedCnt',
    key: 'purchasedCnt',
    sorter: (a: any, b: any) => a.purchasedCnt - b.purchasedCnt,
    align: 'center',
  },
  {
    title: '店铺资产总客户数',
    dataIndex: 'totalCnt',
    key: 'totalCnt',
    sorter: (a: any, b: any) => a.totalCnt - b.totalCnt,
    align: 'center',
  },
  {
    title: '未购客户',
    dataIndex: 'unpurchasedCnt',
    key: 'unpurchasedCnt',
    sorter: (a: any, b: any) => a.unpurchasedCnt - b.unpurchasedCnt,
    align: 'center',
  },
  {
    title: '粉丝数',
    dataIndex: 'vermicelliCnt',
    key: 'vermicelliCnt',
    sorter: (a: any, b: any) => a.vermicelliCnt - b.vermicelliCnt,
    align: 'center',
  },

];
const showChart = ref(false);
</script>

<template>

  <base-app>
    <a-button-group>
      <user @login="loginVisible=true" :style="{
        marginRight: '0',
      }"
      />
      <a-button type="primary" @click="handle" size="small">一键转化</a-button>
    </a-button-group>
    <a-modal v-model:visible="visible" title="客户-客户概况-店铺客户资产" :footer="null" width="1200px" style="top: 40px;">
      <EChart :options="echartOptions" v-if="showChart" style="height: 300px;"/>
      <a-divider/>
      <base-table :scroll="{
        y:350,
      }" table-name="客户-客户概况-店铺客户资产" :data-source="dataSource" :columns="columns">

      </base-table>
    </a-modal>

    <user-login-modal :login-visible="loginVisible" @close="loginVisible = false"/>
  </base-app>
</template>

<style scoped>

</style>
